<template>
  <div class="user-container">
    <div class="container">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/user' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>{{breadcrumbText}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-tabs tab-position="left" @tab-click="handleClick" >
        <el-tab-pane label="基本信息">
          <user-info/>
        </el-tab-pane>
        <el-tab-pane label="订单管理">
            <order-table/>
        </el-tab-pane>
        <el-tab-pane label="运营平台">
            <operation-table/>
        </el-tab-pane>
        <el-tab-pane label="系统设置">
          数据库管理
        </el-tab-pane>
         <el-tab-pane label="修改密码">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import orderTable from '@/components/pc/user/order'
import operationTable from '@/components/pc/user/operation'
import userInfo from '@/components/pc/user/userInfo'
export default {
    components:{orderTable,operationTable,userInfo},
  data() {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      breadcrumbText:'基本信息',
      loadingVisible: false,
      ruleForm:{
        password:'',
        checkPassword:''
      },
      rules:{
        password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPassword: [
            { validator: validatePass2, trigger: 'blur' }
          ],
      }
    };
  },
  created() {
   
  },
  methods: {
    
    handleClick(tab,event){
        this.breadcrumbText=tab.label
    }
  }
};
</script>

<style lang="scss"  scoped>
.user-container {
  width: 100%;
  height: 648px;
  background: #f6f7fb;
}
.container {
  width: 990px;
  margin: 0 auto;
  background: #ffffff;
  .breadcrumb {
    background: #f6f7fb;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
</style>